<template>
	<qh-page-view :showNavbar="false" title="首页">
		<view class="phone-body">
			<view style="position: relative;width: 100%;height: 100%;background-size: 100% 100%" v-if="start_pages_data.type==1">
				<qh-navigator :link='start_pages_data.link' @jump="clearStartTimer">
					<image mode="aspectFill" class="full-screen-image" :src="start_pages_data.pic" >
					</image>
				</qh-navigator>
				<view class="closeBtn" @click.stop="jump()" :style="closeStyle">
					跳过  {{on_time}}s
				</view>
			</view>
			<view v-if="start_pages_data.type==2">
				<view class="closeBtn" @click.stop="jump()" :style="closeStyle">
					关闭
				</view>
				<view>
					<swiper style='height: 100vh;' :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" circular>
						<swiper-item :key="index" v-for="(item,index) in start_pages_data.pic_list">
							<qh-navigator type="reLaunch" :link='item.link' @jump="clearStartTimer">
								<image class='full-screen-image' :src="item.url" mode="aspectFill" >
								</image>
							</qh-navigator>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>	
	</qh-page-view>
</template>

<script>
	var app = getApp().globalData;
	export default {
		data() {
			return {
				start_pages_data:{} ,// 启动页面的数据配置
				timer:"",  // 计时器
				on_time:0, // 倒计时时间
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
			}
		},
		computed:{
			closeStyle(){
				return "top:"+(this.$store.statusBarHeight+54)+"px";
			}
		},
		async onShow(){
			if(this.$store.start_page_status==1){
				this.jump();
				return;
			}
		},
		async onLoad() {
			await this.$onLaunched;
			if(!this.$store.storediy){
				this.jump();
				return;
			}
			// 如果热启动中进入过并见过启动页 快速跳转到首页
			if(this.$store.start_page_status==1){
				this.jump();
				return;
			}
			await this.getStartPageData();
			if(this.start_pages_data.type==1){
				this.start_pages_count_down();
			}
			return;
		},
		onUnload(){
			this.$store.start_page_status = 1;
			clearInterval(this.timer);
		},
		methods: {
			clearStartTimer(){
				this.$store.start_page_status = 1;
				clearInterval(this.timer);
			},
			// 跳转商城首页
			jump(){
				this.$store.start_page_status = 1;
				clearInterval(this.timer);
				if (this.$store.merHomeState == 1) {
					// 商户版商城首页
					uni.reLaunch({
						url: this.$store.merTabbarList[0].page,
					})

					console.log(this.$store.merTabbarList[0].page  ,'this.$store.merTabbarList[0].pagethis.$store.merTabbarList[0].pagethis.$store.merTabbarList[0].page')
				} else if (this.$store.mallPreviewState) {
					// 商城前置页
					uni.reLaunch({
						url: '/pages/district/district',
					});
				} else {
					// 门店首页
					uni.reLaunch({
						url: this.$store.storeTabbarList[0].page,
					});
				}
			},
			// 开始倒计时
			start_pages_count_down(){
				this.on_time = this.start_pages_data.time;
				
				this.timer = setInterval(() => {
				  this.on_time -= 1;
				  if (this.on_time === 0) {
						clearInterval(this.timer);
						// 并触发跳转
						this.jump();
				  }
				}, 1000);
			},
			getStartPageData() {
				return new Promise(async resolve => {
					try {
						// 获取启动页面代码 判断DIY权限会好点
						const {
							status,
							data
						} = await this.$request('DiyStore/Api/getStartPageData',{
							needErrorMsg: false
						});
						if (status == 1) {
							if (data.pic_list) {
								data.pic_list = JSON.parse(data.pic_list);
							}
							if (data.link) {
								data.link = JSON.parse(data.link);
							}
							this.start_pages_data = data;
					
							this.$nextTick(() => {
								resolve(true);
							})
						} else {
							this.jump();
							resolve(false);
						}
					} catch (err) {
						this.jump();
						resolve(false);
					}
				})
			}
		}
	}
</script>

<style>
	.phone-body{
		height: 100vh;
	}
	.closeBtn {
		position:absolute;
		width:140rpx;
		height:60rpx;
		color:#ffffff;
		line-height:60rpx;
		text-align:center;
		right:50rpx;
		z-index:10000;
		background:#000000;
		opacity:0.6;
		font-size:24rpx;
		border-radius:30rpx;
		font-size: 25rpx;
	}
	.full-screen-image {
	  width: 100%;
	  height: 100vh;
	  object-fit: cover;
	  z-index: -1;
	}
</style>
